<template>
  <el-dialog width="900px" :close-on-click-modal="false" :title="title" @close="close" :visible.sync="visible" append-to-body>
    <el-form class="five" ref="form" :model="formData" :rule="rules">
      <el-row>
        <el-form-item label="基础信息" class="w-100percent bold bg-lightGray"></el-form-item>
      </el-row>
      <el-row>
        <!-- 添加表格 -->
        <el-table border stripe :data="reviewList"  >
          <el-table-column prop="id" fixed label="序号" type="index" align="right" width="50"></el-table-column>
          <el-table-column prop="createrName"  label="提交人"  align="left" header-align="center"  width="120"></el-table-column>
          <el-table-column prop="createTime"  label="提交时间" align="center" width="120"></el-table-column>
          <el-table-column prop="beginTime" label="开始时间" align="center" min-width="120"></el-table-column>
          <el-table-column prop="endTime" label="结束时间" align="center" min-width="120"></el-table-column>
          <el-table-column prop="taskTime" label="任务用时" align="center" min-width="120"></el-table-column>
          <el-table-column prop="taskRemark" label="任务备注" align="center" min-width="120"></el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-form-item label="审核"  class="w-100percent bold bg-lightGray"></el-form-item>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="审批结论" label-width="120px" prop="conclusion">
            <el-select v-model="formData.conclusion" class="w150" placeholder="请选择审批结论" clearable filterable>
              <el-option label="同意" :value="1"></el-option>
              <el-option label="不同意" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="小时单价" label-width="120px" prop="price">
            <el-select v-model="formData.price" filterable class="w-60percent" placeholder="单价">
              <template v-for="item in priceList">
                <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="审批意见" label-width="120px" prop>
            <el-input type="textarea" :row="5" v-model="formData.auditRemark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save">提交</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { State, namespace } from 'vuex-class'

@Component({
  components: {}
})
export default class DialogDetail extends Vue {
  public $refs!: {
    form: any
  }
  title: string = '审核'
  visible: boolean = false
  reviewList: any[] = []

  formData: any = {
    id: '',
    conclusion: '',
    price: '',
    auditRemark: ''
  }
  rules = {
    price: [{ validator: this.validatePrice, trigger: 'blur' }],
    state: [{ required: true, message: '请填写审批结论', trigger: 'blur' }]
  }
  priceList: any[] = [
    {
      label: '100元/小时',
      value: 100
    },
    {
      label: '120元/小时',
      value: 120
    },
    {
      label: '150元/小时',
      value: 150
    }
  ]
  form: any = {}
  // open(reviewList: { workRecordList:[] ;id:number}[]) {
  //   this.reviewList = reviewList[0].workRecordList
  //   this.formData.id = reviewList[0].id
  //   this.visible = true
    
  // }
  open(reviewData) {
    this.reviewList = reviewData.workRecordList
    this.formData.id = reviewData.id
    this.visible = true
    
  }
  validatePrice(rule, value, callback) {
    if (this.formData.conclusion == 1) {
      if (!value) {
        callback(new Error('请输入小时单价'))
      } else {
        callback()
      }
    } else {
      callback()
    }
  }
  save() {
    console.log(this.formData)
    if (this.formData.conclusion==='') {
      this.$alert('请选择审批结论！', '操作提示', {
        confirmButtonText: '确定',
        type: 'warning'
      })
    } else if (!this.formData.price) {
      this.$alert('请填写小时单价！', '操作提示', {
        confirmButtonText: '确定',
        type: 'warning'
      })
    } else {
      this.$emit('review-attendance', { ...this.formData })
    }
    // this.visible = false
  }
  close() {
    this.$refs.form.resetFields()
    this.formData = {
      id: '',
      state: '',
      hourPrice: '',
      auditRemark: ''
    }
    this.form = {}
    this.visible = false
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  overflow: hidden;
  .el-dialog {
    height: 80vh;
    margin-top: 5vh !important;
    display: flex;
    flex-direction: column;
    .el-dialog__body {
      flex: 1;
      // height: 450px;
      overflow: auto;

      .el-input__inner {
        background-color: #fff;
        border-color: #e4e7ed;
        color: #000;
        cursor: not-allowed;
      }
    }
    .el-dialog__footer {
      border-top: 1px solid #eee;
      padding: 10px 20px;
      background: #fefefe;
    }
  }
}
.five {
  .el-form-item {
    margin-bottom: 22px;
  }
}
</style>
